<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>验证用户名是否有效</title>
  <script type="text/javascript">
    /*
    * @Description: 当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
    * 验证规则：必须由字母，数字，下划线组成，并且长度是5到12位
    */
    function onclickFun(){
      //当我们要操作一个标签的时候，一定要先获取这个标签的对象
      var username = document.getElementById("username");
      var usernametext = username.value;

      //验证字符串符合某个规则，需要使用正则表达式技术
      var patt = /^\w{5,12}$/;

      var usernamespan = document.getElementById("usernamespan");
      //innerHTML  表示起始标签和结束标签的内容
      //innerHTML  这个属性可读可写
      /*
      * @Description: test()方法用于测试某个字符串，是不是匹配我的规则
      * 匹配就返回true,不匹配就返回false
      */
      if (patt.test(usernametext)){

        usernamespan.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
      }else{
        usernamespan.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
      }
    }
  </script>
</head>
<body>
用户名：<input type="text" id="username">
<span id="usernamespan" style="color:red"></span>
<button onclick="onclickFun()">校验</button>
</body>
</html>
